<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
        <meta name="author" content="order by dede58.com"/>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>购物车</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
		
		<script src="js/head.js"></script>
	</head>
	<script>
		$(function(){
			 
			let nickname = "${sessionScope.customer.nickname}";
			let content = "";
			if(nickname!=""){
				content = "<span class=\"fl\">欢迎</span>"+
						"<a href=\"grxx.jsp\" class=\"fl\">"+nickname+"</a>"+
						"<span class=\"fl\">进入商城</span>"+
						"<a href=\"../LoginServlet?op=customerLogout\" class=\"fl\">退出登陆</a>";
			}else{
				content = "<span class=\"fl\">您好，请</span>"+
						"<a href=\"sign.jsp\" class=\"fl\">登录</a>";
			}
			$("#customerInfo").html(content);
			
			$(document).on("click","#shopCount",function(){
				if(nickname!=""){
					$(this).prop("href","shopping.jsp");
				}else{
					alert("请先登录");
				}
			});
			
		});
		/* 通过游戏编号查询游戏信息添加入购物车*/
		
		/* $.ajax({
			async:true,
			type:"GET",
			url:"../GamesServlet",
			data:{
				op:"find",
				gamesId:${param.gamesId}
			},
			contentType:"application/x-www-form-urlencoded",
			dataType:"json",
			success:function(result,status,xhr){
				$("#shop").append("<tr>"+
						"<td><input type=\"checkbox\" name=\"\" class=\"\"></td>"+
						"<td>"+
							"<p class=\"o-goods-info ml20 clearfix pt10 pb10\">"+
								"<a href=\"#\" class=\"fl\"><span><img src=\"/gamestore/FileDownloadServlet?type=image&fileName="+result.data.image+"\" alt=\"\"></span></a>"+
								"<span class=\"fl tit mt5 ml10\">"+result.data.gamesName+"</span>"+
							"</p>"+
						"</td>"+
						"<td>"+result.data.price+"</td>"+
						"<td>"+
							"<p class=\"clearfix\">"+
								"1"+
							"</p>"+
						"</td>"+
						"<td><span class=\"orange\">"+result.data.price+"</span></td>"+
						"<td>"+
							"<a href=\"#\"><i class=\"iconfont fs26\">&#xe60b;</i></a>"+
						"</td>"+
					"</tr>");
			},
		}); */	
			
		/* 创建一个查询方法通过游戏编号查询游戏信息添加入购物车*/
		function s(){
			$.ajax({
				async:true,
				type:"GET",
				url:"../OrderServlet",
				data:{
					op:"find",
					orderNo:"0",
					customerId:${sessionScope.customer.customerId}
				},
				contentType:"application/x-www-form-urlencoded",
				dataType:"json",
				success:function(result,status,xhr){
					let content = "<tr>"+
				    "<th width=\"10%\"><input type=\"checkbox\" value=\"\" class=\"toggle-checkboxs\" style=\"cursor: pointer;\"/>全选</th>"+
					"<th width=\"40%\">游戏</th>"+
					"<th width=\"14%\">单价(元)</th>"+
					"<th width=\"12%\">数量</th>"+
					"<th width=\"14%\">小计(元)</th>"+
					"<th width=\"14%\">操作<a href=\"#\" id=\"deleteAll\" style=\"color:red;\">移除所有<i class=\"iconfont fs26\">&#xe60b;</i></a></th>"+
					"</tr>";
					$.each(result.data,function(index,games){
						
						content += "<tr>"+
							"<td><input type=\"checkbox\" name=\"\" class=\"\" id=\"xz\"></td>"+
							"<td>"+
								"<p class=\"o-goods-info ml20 clearfix pt10 pb10\">"+
									"<a href=\"#\" class=\"fl\"><span><img src=\"/gamestore/FileDownloadServlet?type=image&fileName="+games.image+"\" alt=\"\"></span></a>"+
									"<span class=\"fl tit mt5 ml10\">"+games.gamesName+"</span>"+
								"</p>"+
							"</td>"+
							"<td>"+games.price+"</td>"+
							"<td>"+
								"<p class=\"clearfix\">"+
									"1"+
								"</p>"+
							"</td>"+
							"<td><span class=\"orange\" id=\"price\">"+games.price+"</span></td>"+
							"<td>"+
								"<input type=\"hidden\" name=\"gamesId\" value=\""+games.gamesId+"\">"+
								"<a href=\"#\" id=\"delete\"><i class=\"iconfont fs26\">&#xe60b;</i></a>"+
							"</td>"+
						"</tr>";
						
					});
					$("#shop").html(content);
				},
				
			});	
		}
		/* 调用方法通过游戏编号查询游戏信息添加入购物车*/
		s();
	</script>
	
	<script type="text/javascript">
	$(function(){
		/* 获取购物车中游戏数量*/
		function s(){
			$.ajax({
				async:true,
				type:"GET",
				url:"../OrderServlet",
				data:{
					op:"find",
					orderNo:"0",
					customerId:${sessionScope.customer.customerId}
				},
				contentType:"application/x-www-form-urlencoded",
				dataType:"json",
				success:function(result,status,xhr){
					let count = 0;
					$.each(result.data,function(index,games){
						count = index + 1;
					});
					$("#shopCount").text("购物车（"+count+"）");
					
				},
				
			});	
		}
		/* 调用方法获取购物车中游戏数量*/
		s();

		// 购物车单行移除
		$(document).on("click","#delete",function(){
			let gamesId = $(this).prev("input[name='gamesId']").val();
			if(confirm("确定从购物车删除该游戏?")){
				
				
				// 删除数据库中该用户的orderNo=0的记录
				$.ajax({
					async:true,
					type:"GET",
					url:"../OrderServlet",
					data:{
						op:"delete",
						gamesId:gamesId,
						orderNo:"0",
						customerId:${sessionScope.customer.customerId}
					},
					contentType:"application/x-www-form-urlencoded",
					dataType:"json",
					success:function(result,status,xhr){
						if(result.status==1){
							// 删除成功更新购物车中游戏数量
							s();
						}else{
							// 删除失败
						}
						

					},
				});
				
				$(this).parents("tr").remove();
				let sum = 0;
				$("table").find("tr td:nth-child(1)").each(function(index,element){
					if($(this).children().prop("checked")){
						sum += eval($(this).parents("tr").find("td:nth-child(5)").text());
					}
				});
				$("#total").text("¥"+sum);
				$("th input[type='checkbox']").prop("checked", $("td input[type='checkbox']:not(:checked)").length===0 && $("td input[type='checkbox']").length!=0);
				if($("td input[type='checkbox']").length===0){
					$("th input[type='checkbox']").prop('disabled',true);
					
				}
				
			}
		});
		
		
		
		// 购物车全部移除
		$(document).on("click","#deleteAll",function(){
			if(confirm("确定清空购物车?")){
				// 删除数据库中该用户的所有的orderNo=0的记录
				$(this).parents("tr").siblings().each(function(index,tr){
					let gamesId = $(this).find("input[name='gamesId']").val();
					$.ajax({
						async:true,
						type:"GET",
						url:"../OrderServlet",
						data:{
							op:"delete",
							gamesId:gamesId,
							orderNo:"0",
							customerId:${sessionScope.customer.customerId}
						},
						contentType:"application/x-www-form-urlencoded",
						dataType:"json",
						success:function(result,status,xhr){
							if(result.status==1){
								// 删除成功更新购物车中游戏数量
								s();
							}else{
								// 删除失败
							}
							

						},
					});
				});
				
				
				
				// 禁用移除所有的按钮
				
				$(this).parents("tr").siblings().remove();
				$("th input[type='checkbox']").prop('disabled',true);
				$("#total").text("¥0");
			}
			
			// 考虑购物车没游戏时提示购物车暂无商品
		
		});
		// 总计价格
		$(document).on("click","#xz",function(){
			let sum = 0;
			$(this).parents("table").find("tr td:nth-child(1)").each(function(index,element){
				if($(this).children().prop("checked")){
					sum += eval($(this).parents("tr").find("td:nth-child(5)").text());
				}
			});
			$("#total").text("¥"+sum);
			$("th input[type='checkbox']").prop("checked",$("td input[type='checkbox']:not(:checked)").length===0);
		});
		// 选择
		$(document).on("click","th input[type='checkbox']",function(){
				$("td input[type='checkbox']").prop("checked",$(this).prop("checked"));
				let sum = 0;
				$("table").find("tr td:nth-child(1)").each(function(index,element){
					if($(this).children().prop("checked")){
						sum += eval($(this).parents("tr").find("td:nth-child(5)").text());
					}
				});
				$("#total").text("¥"+sum);
			});
		// 选择
	});
	</script>
	
	
	<script type="text/javascript">
		$(function(){
			
		});
		</script>
	
	
	<body>
		

		<!--Main-wrap-->
		<div class="main-wrap graybg" id="cen">
			<div class="wrapper">
				<div class="shopping-list pt40 pb40" style="margin-top: 86px;">
					<table class="table_1 table_shopping white-box" id="shop">
						
						<!-- <tr>
							<td><input type="checkbox" name="" class=""></td>
							<td>
								<p class="o-goods-info ml20 clearfix pt10 pb10">
									<a href="#" class="fl"><span><img src="upload/2.jpg" alt=""></span></a>
									<span class="fl tit mt5 ml10">互点农场五常大米</span>
								</p>
							</td>
							<td>29.90</td>
							<td>
								<p class="clearfix">
									1
								</p>
							</td>
							<td><span class="orange">29.90</span></td>
							<td>
								<a href="#"><i class="iconfont fs26">&#xe60b;</i></a>
							</td>
						</tr> -->
						
					</table>
					
					<div class="shopping-result white-box mt20 clearfix" id="shopping-result">
						<a href="mall.jsp" class="fl fs16 pl10">继续购物>></a>
						<p class="fr">
							<a href ="javascript:void(0);" class="fr orange-but fs20" id="js">提交订单</a>
							<span class="fr pr20 fs14">总计：<em class="orange fs24" id="total">¥0</em></span>
						</p>
					</div>
					
				</div>
			</div>
		</div>
		<!--/end-->
		<!-- 提交订单的点击事件 -->
		<script type="text/javascript">
		$(function(){
			$("#js").click(function(){
				if($("td input[type='checkbox']").length==0){
					alert("购物车中无游戏");
				}else if($("#xz:checked").length==0){
					alert("购物车未选中购买游戏");
				}else{
					let array = new Array();
					let sum = 0;
					let i = 0;
					$(this).parents("#shopping-result").prev().children().children().each(function(index,tr){
						if(index>0){
							if($(this).find("#xz").prop("checked")){
								
								let price = $(this).find("#price").text();
								let gamesId = $(this).find("input[name='gamesId']").val();
								
								array[i] = gamesId;
								sum += eval(price);
								i++;
								
								
								/* 删除数据库中orderNo=0的订单详情 */
								$.ajax({
									async:true,
									type:"GET",
									url:"../OrderServlet",
									data:{
										op:"delete",
										gamesId:gamesId,
										orderNo:"0",
										customerId:${sessionScope.customer.customerId}
									},
									contentType:"application/x-www-form-urlencoded",
									dataType:"json",
									success:function(result,status,xhr){
										if(result.status==1){
											// 删除成功
											
										}else{
											// 删除失败
										}
										

									},
								});
								
								
								
								
								
							}
							
						}
					});
					
					location.href="jiesuan.jsp?sum="+sum+"&array="+array;
				}
			});
		});
		</script>
		<!--footer star-->
		<div class="footer clearfix">
			<div class="content clearfix">
				<div class="top clearfix">
					<div class="list clearfix fl box-s">
						<div class="part icon1 box-s">
							<h3>专业</h3>
							<p>拥有资深游戏顾问和先进交易平台，安全交易，快捷支付。</p>
						</div>
					</div>
					<div class="list clearfix fl box-s">
						<div class="part icon2 box-s">
							<h3>保真</h3>
							<p>阵容强大的游戏评鉴团，确保平台上的游戏货真价实。</p>
						</div>
					</div>
					<div class="list clearfix fl box-s">
						<div class="part icon3 box-s">
							<h3>保值</h3>
							<p>为您精选具备收藏价值的游戏作品，助您的资产保值、增值。</p>
						</div>
					</div>
				</div>
				<div class="bottom clearfix">
					<div class="left clearfix fl">
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>新手指南</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="scgmlc.html">购买流程</a></li>
									<li><a href="cjwt.html">常见问题</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>账户管理</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="zhcz.html">账户充值</a></li>
									<li><a href="zhtx.html">账户提现</a></li>
									<li><a href="zffs.html">支付方式</a></li>
								</ul>
							</div>
						</div>						
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>服务合作</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="friend-link.html">友情链接</a></li>
									<li><a href="ysjrz.html">玩家入驻</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>关于我们</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="gsjj.html">公司简介</a></li>
									<li><a href="contact.html">联系我们</a></li>
									<li><a href="jrwm.html">加入我们</a></li>
								</ul>
							</div>
						</div>
						<div class="list clearfix">
							<div class="shang clearfix">
								<p>售后服务</p>
								<span></span>
							</div>							
							<div class="xia clearfix">
								<ul>
									<li><a href="wlsm.html">交易说明</a></li>
									<li><a href="mzsm.html">免责声明</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="middle clearfix fl">
						<ul>
							<li><img src="upload/ewm.jpg"/></li>
							<li><img src="upload/ewm.jpg"/></li>
						</ul>
					</div>
					<div class="right clearfix fr">
						<p class="bt">免费咨询热线：</p>
						<p class="tel">400-000-0000</p>
						<p class="fu-bt">(周一到周五8:00-22:00)</p>
					</div>
				</div>
			</div>
			<div class="banquan clearfix ta-center">
				Copyright © 2021 厦门游戏商城(xiamenyouxishangcheng). All Rights Reserved. 
			</div>
		</div>
		<!--footer end-->
	</body>

</html>